<template>
	<view class="isShowModal-mask" @touchmove.stop.prevent="">
		<view class="isShowModal">
			<view class="isShowModal-view">
				<view class="isShowModal-text" :style="{'font-size': modalTextSize,'line-height':modalTextHeight,color:modalTextColor}">{{modalText1}}<br />{{modalText2}}
				</view>
				<view class="isShowModal-button">
					<view class="isShowModal-button-left" @click="clickLeft()">{{buttonLeftText}}
					</view>
					<view :style="{color:rightButtonColor}" class="isShowModal-button-right" @click="clickRight()">{{buttonRightText}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "showModalButton",
		props: {
			modalText1: {
				typr: String,
				default: '请输入第一行文字'
			},
			modalText2: {
				typr: String,
				default: '请输入第二行文字'
			},
			buttonLeftText: {
				typr: String,
				default: '请输入左按钮文字'
			},
			buttonRightText: {
				typr: String,
				default: '请输入右按钮文字'
			},
			modalTextSize: {
				typr: String,
				default: '36rpx'
			},
			rightButtonColor:{
				typr: String,
				default: '#17C295'
			},
			modalTextHeight:{
				typr: String,
				default: '36rpx'
			},
			modalTextColor:{
				type:String,
				default:'#000000'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			clickLeft() {
				this.$emit('clickLeft')
			},
			clickRight() {
				this.$emit('clickRight')
			},
		},
	}
</script>

<style lang="less">
	.isShowModal-mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.40);
	}

	.isShowModal {
		width: 550rpx;
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.isShowModal-view {
		width: 550rpx;
		height: 168rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.isShowModal-text {
		font-weight: bold;
		color: #000000;
		text-align: center;
	}

	.isShowModal-button {
		width: 550rpx;
		height: 79rpx;
		border-top: 1rpx solid #BDBDBD;
		position: absolute;
		bottom: 0px;
		display: flex;
		justify-content: space-between;
	}

	.isShowModal-button-left {
		width: 274rpx;
		height: 79rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1rpx solid #BDBDBD;
		font-size: 32rpx;
		font-weight: 500;
		color: #787878;
		line-height: 45rpx;
	}

	.isShowModal-button-right {
		width: 275rpx;
		height: 79rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		line-height: 45rpx;
	}
</style>
